<template>
  <div class="icons-wrapper">
      <category-icons-sub
        v-for="item of itemList"
        :key="item.id"
        :bgColor="item.bgColor"
        :icon="item.icon"
        :field="item.field"
        :iconText="item.iconText"
      ></category-icons-sub>
      {{field}}
  </div>
</template>

<script>
import CategoryIconsSub from './Sub';
import fieldDatas from 'data/fields';
import { mapState } from 'vuex';
export default {
    name: 'CategoryIcons',
    components: {
        CategoryIconsSub
    },
    data () {
        return {
            itemList: fieldDatas
        }
    },
    computed: {
        ...mapState(['field'])
    }
}
</script>

<style lang="scss" scoped>
@import '~styles/mixins.scss';
@import '~styles/variables.scss';
.icons-wrapper {
    @include flex-row;
    flex-wrap: wrap;
    background-color: #fff;
    border: 1px solid #ddd;
}

</style>